<template>
	<view>
		<view class="item" v-for="(item,index) in cartItems" :key="item.shoppingCartId">
			<uni-section :title="'商品'+(index+1)" type="line">
				<uni-card :title="item.commodityName" :sub-title="item.provider+' '+' 捐 '" :extra="'单价:'+item.price"
					:thumbnail="item.photoOne">
					<view class="quantity">
						<view class="star">
							总价：{{ item.quantity*item.price }}
							<image src="/static/星星.png" />
						</view>
						<view class="add">
							<view class="icon" @click="jian(item)">
								<image src="/static/减号.png" />
							</view>
							<view class="num">{{ item.quantity }}</view>
							<view class="icon_add_icon" @click="add(item)">
								<image src="/static/加号.png" />
							</view>
						</view>
					</view>
					<!-- <text class="uni-body">{{item.name}}</text> -->
				</uni-card>
			</uni-section>
		</view>
		<view class="bottom"></view>
	</view>
	<view class="shopCar">
		<view class="left">
			<view class="number">{{ number }}</view>
			<view class="price">总计:
				{{ total_star }}
				<view class="star_picture">
					<image src="/static/星星.png" />
				</view>
			</view>
			<!-- <view class="detail" @click="inputDialogToggle">详情</view> -->
		</view>
		<view class="block"></view>
		<view :class="number != 0 ? 'right active' : 'right'" @click="creatOrder()">
			生成订单</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '/api';
	// import store from '/pages/store/index.js';
	// import shop from '/pages/shop/shop.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		// computed: {
		// 	...mapState(['token', 'children'])
		// },
		computed: {
			// ...mapState(['token', 'children'])
			number: function() {
				return this.cartItems.reduce(function(total, item) {
					return total + item.quantity;
				}, 0);
			},
			total_star: function() {
				return this.cartItems.reduce(function(total, item) {
					return total + item.quantity*item.price;
				}, 0);
			},
			...mapState(['token', 'children'])
		},
		data() {
			return {
				cover: '/static/语文书.jpg',
				avatar: '',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				// buyData: {},
				index: 0,
				cartItems: [],
				id: 'qweasdzxc',
				// total_star: 0,
				// number: 0,
				// starUrl: '/static/星星.png',
			}
		},
		// onLoad() {
		// 	console.log(this.filteredItems, 66)
		// },
		onShow() {
			this.GetItems();
			// console.log("我是token");
			// console.log(this.token);
		},
		methods: {
			toUrl(url) {
				// this.updateOrder()
				url = url
				uni.navigateTo({
					url
				});
			},
			async GetItems() {
				await uni.request({
					url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.cartItems = res.data.data;
						// console.log('我是cart');
						// console.log(res.data);
						// console.log(this.cartItems);
						// this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			add(item) {
				// this.text = 'request success';
				// console.log("diaowo!item");
				// console.log(item);
				uni.request({
					url: BASE_URL + '/shoppingCart',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: 'qweasdzxc',
						commodityId: item.commodityId,
						commodityName: item.commodityName,
						inventory: item.inventory,
						price: item.price,
						quantity: 1,
						// shoppingCartId: 1,
					},
					success: (res) => {
						console.log(res)
						this.text = '加1';
						console.log(this.text);
						this.GetItems();
					}
				});

			},
			jian(item) {
				// this.text = 'request success';
				// console.log("diaowo!item");
				// console.log(item);
				uni.request({
					url: BASE_URL + '/shoppingCart',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: 'qweasdzxc',
						commodityId: item.commodityId,
						commodityName: item.commodityName,
						inventory: item.inventory,
						price: item.price,
						quantity: -1,
						// shoppingCartId: 1,
					},
					success: (res) => {
						console.log(res)
						this.text = '加1';
						console.log(this.text);
						this.GetItems();
					}
				});

			},
			creatOrder() {
				// this.text = 'request success';
				// console.log("diaowo!item");
				console.log(this.cartItems);
				uni.request({
					url: BASE_URL + '/shoppingCart/checkOut',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: this.cartItems,
					success: (res) => {
						console.log(res)
						console.log("添加订单了哦");
						// this.GetItems();
						this.toUrl('/pages/shopOrder/shopOrder');
					}
				});

			},
			// onClick() {
			// 	console.log(this.buy_items)
			// },
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			// add(item) {
			// 	item.buy_Quantity += 1;
			// 	// this.number = this.number + 1;
			// 	this.addNumber();
			// 	this.addStar(item);
			// 	item.star_Quantity += item.star;
			// 	// this.total_star += item.star;
			// },
			// jian(item) {
			// 	item.buy_Quantity -= 1;
			// 	// this.number -= 1;
			// 	this.deleteNumber(item)
			// 	this.deleteStar(item);
			// 	item.star_Quantity -= item.star;
			// 	// this.total_star -= item.star;
			// },
			// ...mapActions(['updateOrder', 'updateNumber', 'addNumber', 'deleteNumber', 'updateStar',
			// 	'addStar', 'deleteStar', 'deleteAllStar'
			// ])
		},
	}
</script>

<style lang="scss">
	.quantity {
		display: flex;
		flex-flow: row;
		align-items: center;

		.star {
			width: 120px;

			image {
				width: 15px;
				height: 15px;
				// margin-top: 50px;
			}
		}

		.add {
			margin-left: 150px;
			display: flex;
			flex-flow: row;
			// justify-content: space-between;
			align-items: center;

			image {
				width: 20px;
				height: 20px;
			}

			.icon {
				margin-right: 10px;
			}

			.icon_add_icon {
				margin-left: 10px;
			}
		}

	}


	.shopCar {
		position: fixed;
		bottom: 30rpx;
		margin-left: 140upx;
		display: flex;
		// justify-content: center;
		// align-items: center;
		height: 90rpx;

		.left {
			display: flex;
			background-color: #565658;
			border-radius: 45rpx 0 0 45rpx;

			.price {
				width: 180rpx;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				// padding: 0 20rpx;
				display: flex;
				flex-flow: row;
				justify-content: space-between;

				.star_picture {
					image {
						width: 50upx;
						height: 50upx;
						margin-top: 20upx;
					}
				}
			}

			.detail {
				width: 100rpx;
				height: 90rpx;
				padding: 20upx 16upx;
			}

			.number {
				width: 90rpx;
				height: 90rpx;
				background-color: #d81e06;
				border-radius: 50%;
				text-align: center;
				line-height: 90rpx;
				color: #fff;
			}
		}

		.block {
			width: 10rpx;
			height: 90rpx;
			background-color: #fff;
		}

		.right {
			color: #fff;
			background-color: #d5d5d5;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 20rpx;
			border-radius: 0 40rpx 40rpx 0;
		}

		.active {
			background-color: orange !important;
		}
	}

	.bottom {
		// background-color: #e6e6e6;
		height: 120upx;
	}
</style>